<template>
  <div class="text-left padding-lr">
    <el-table
      :data="tableData"
      size="mini"
      tooltip-effect="dark"
      class="margin-bottom"
    >
      <el-table-column
        prop="bankStatementAmount"
        label="充值金额（RMB）"
      ></el-table-column>
      <el-table-column prop="rechargePicture" label="充值图片">
        <template slot-scope="scope">
          <el-image
            style="width: 20px; height: 20px"
            :src="scope.row.rechargePicture"
            :preview-src-list="[scope.row.rechargePicture]"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>

    <el-form ref="form" :model="form" label-width="130px">
      <el-form-item label="增加新备注：">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item></el-form-item>
      <el-form-item>
        <el-button type="success" @click="auditFun(1)">审核通过</el-button>
        <el-button type="danger" @click="auditFun(-1)">审核不通过</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//引入 ajax 工具
//翻译工具
import { ajax } from "@/store/yg/common/utils";
import { closeDialog } from "@/utils";

import * as constant from "@/store/yg/common/constant";

export default {
  props: ["data", "row", "more"],
  data() {
    return {
      tableData: [],

      fileUrl: constant.FILE_SERVER,
      form: {},
      auditFunData: {
        id: "",
        statementStatus: "",
        remark: ""
      }
    };
  },
  mounted() {
    console.log(
      "this.$store.state.edit :>> ",
      this.$store.state.main.pageData.data
    );
    console.log("this.$store.state.edit :>> ", this.$store.state.edit);
    //获取到的所有的数据
    const allData = this.$store.state.main.pageData.data;
    //获取到的选择的 数据
    const ids = this.$store.state.edit.ids;

    let arr = [];
    for (const i of allData) {
      for (const j of ids) {
        if (i.id === j) {
          arr.push(i);
        }
      }
    }

    //循环开始选择数据 组装显示文件的全路径
    for (let i = 0; i < arr.length; i++) {
      arr[i].rechargePicture = this.fileUrl + arr[i].rechargePicture;
    }
    console.log("arr :>> ", arr);
    this.tableData = arr;

    const dataRow = this.$store.state.edit.row;
    this.form = dataRow;
    console.log("dataRow", dataRow);
  },
  methods: {
    async auditFun(status) {
      console.log("status", status);
      this.auditFunData.statementStatus = status;
      this.auditFunData.remark = this.form.remark;
      this.auditFunData.ids = this.$store.state.edit.ids;
      console.log("log", this.auditFunData);
      const { code, data, message } = await ajax(
        "saveStatement",
        this.auditFunData
      );
      if (code == 200) {
        this.$message.success("成功");
        closeDialog();
      } else if (code == 500) {
        this.$message.error("服务器发生异常：" + message);
      } else {
        this.$message.error("程序异常");
      }
    }
  }
};
</script>

<style scoped>
/deep/ .el-select,
.el-input-number,
.el-date-editor {
  width: 100%;
}

.el-form-item {
  text-align: center;
}
</style>
